<template>
  <div>
    <h1 class="con-right-title">问卷模版管理</h1>
    
    <!-- 顶部搜索 -->
    <div class="search-row search-box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="模板名称">
          <el-select v-model="formInline.templateName" filterable placeholder="请输入问卷模版标题">
            <el-option v-for="(item, index) in templateList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="问卷状态">
          <el-select v-model="formInline.templateStatus" filterable placeholder="请输入问卷状态">
            <el-option v-for="(item, index) in statusList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="success" plain @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--table 刷新-->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>

    <!--table 列表-->
    <div class="table-box">
      <el-table ref="table" stripe v-loading="loading" :data="tableData" :fit="true" max-height="490">
        <el-table-column type="index" label="序号">
          <template slot-scope="scope">
            {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
          </template>
        </el-table-column>

        <el-table-column label="模板名称" prop="templateName" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.templateName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" prop="templateStatus" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.templateStatus === 'OPEN'" effect="plain">启用中</el-tag>
            <el-tag v-else type="danger" effect="plain">已禁用</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="引用次数" prop="quoteCount" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.quoteCount }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.templateStatus === 'OPEN'" type="text" @click="onDisable(scope.row)" v-permission="'wh:surveyTemplate:status'">
              禁用
            </el-button>
            <el-button v-if="scope.row.templateStatus === 'CLOSE'" type="text" @click="onEnable(scope.row)" v-permission="'wh:surveyTemplate:status'">
              启用
            </el-button>
            <el-button :disabled="scope.row.templateStatus === 'CLOSE'" type="text" @click="onPreview(scope.row)" v-permission="'wh:surveyTemplate:view'">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-全局组件-->
    <pageCom :searchParams="searchParams" :total="total" @searchList="searchList"></pageCom>
  </div>
</template>

<script>
import { templates, disabled, enabled } from '@/api/survey'

const templateDic = {
  1: { key: 'shengxue' },
  2: { key: 'zhuanxianger' },
  3: { key: 'zhuanxiangyi' },
  4: { key: 'rumen' }
}

export default {
  msg: '问卷模板管理',
  data() {
    return {
      total: 0,
      loading: true,
      tableData: [],
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 问卷模板
      templateList: [
        { dictLabel: '入门课满意度调查问卷', dictValue: '入门课满意度调查问卷' },
        { dictLabel: '专项1满意度调查问卷', dictValue: '专项1满意度调查问卷' },
        { dictLabel: '专项2满意度调查问卷', dictValue: '专项2满意度调查问卷' },
        { dictLabel: '升学意向度问卷', dictValue: '升学意向度问卷' }
      ],

      // 问卷状态
      statusList: [
        { dictLabel: '启用中', dictValue: 'OPEN' },
        { dictLabel: '禁用', dictValue: 'CLOSE' }
      ],
      
      formInline: { templateName: '', templateStatus: '' }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {

    searchList() {
      this.loading = true
      
      let params = { ...this.searchParams, ...this.formInline }
      templates(params, (res) => {
        this.total = res.total
        this.tableData = res.rows
        this.loading = false
      },(err) => {
        this.$message({
          message: err.message,
          type: 'warning'
        })
      })
    },

    /** 查看 */
    onPreview(row) {
      const template = templateDic[row.id].key
      const params = `/survey/?type=${template}&preview=true`
      window.open(process.env.VUE_APP_WAP_URL + params, '_blank')
    },

    /** 禁用 */
    onDisable(row) {
      disabled(row.id, {}, (res) => {
        this.searchList()
      },(err) => {
        this.$message({
          message: err.message,
          type: 'warning'
        })
      })
    },

    /** 启用 */
    onEnable(row) {
      enabled(row.id, {}, (res) => {
        this.searchList()
      },(err) => {
        this.$message({
          message: err.message,
          type: 'warning'
        })
      })
    },

    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },

    /* 搜索 */
    onSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },

    /** 重置 */
    onReset() {
      this.formInline.templateName = ''
      this.formInline.templateStatus = ''
    },

    /* 刷新列表 */
    refresh() {
      this.searchList()
    }
  }
}
</script>
